.container {
  padding-bottom: 200rpx;

  .map_box{
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    #navi_map{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
		  	height: 60%;
		}

	.box{
			width: 100%;
			position: absolute;
			top: 50%;
			left: 0;
			z-index: 11;
			background: #fff;
			padding-bottom: 30%;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			.newTask {
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				background: #fff;
				border-bottom: 2rpx solid #ccc;
				border-top-right-radius: 30rpx;
				border-top-left-radius: 30rpx;

				.head {
					display: flex;
					justify-content: space-between;
					height: 70rpx;

					.time {
						font-weight: 700;

						text {
							color: var(--themeColorBlue);
						}
					}

					.money {
						font-weight: 600;
						color: #df3125;
						font-size: 28rpx;

						text {
							margin-right: 10rpx;
							font-size: 40rpx;
						}
					}
				}

				.content {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					position: relative;

					.line {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						left: 5rpx;
						top: 50%;
						transform: translateY(-100%);
						display: flex;
						flex-direction: column;
						font-size: 24rpx;
					}


					.right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 30rpx;

						.item {
							display: flex;
							justify-content: space-between;
							margin-bottom: 20rpx;

							.takeFood {
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								margin-right: 40rpx;
							}

							.get {
								color: #fff;
								width: 50rpx;
								height: 50rpx;
								border-radius: 50%;
								background: var(--themeColor);
								font-size: 28rpx;
								font-weight: 700;
							}

							.send {
								color: #fff;
								width: 50rpx;
								height: 50rpx;
								border-radius: 50%;
								background: #57b078;
								font-size: 28rpx;
								font-weight: 700;
							}

							.right {
								flex: 1;
								display: flex;
								flex-direction: column;

								.find {
									text-align: center;
									width: 150rpx;
									height: 60rpx;
									line-height: 60rpx;
									border: 2rpx solid #ccc;
									border-radius: 10rpx;
									margin-top: 20rpx;
									font-size: 28rpx;
									font-weight: 700;
								}

								.title {
									font-weight: 600;
									font-size: 40rpx;
									margin-bottom: 10rpx;
								}
							}

						}

						.type {
							font-weight: 700;
							width: 140rpx;
							text-align: center;
							font-size: 22rpx;
							border: 2rpx solid #ccc;
						}
					}

				}
			}

			.commodity-list{
				background: #fff;
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				border-bottom: 2rpx solid #ccc;
				margin-bottom: 20rpx;

				.title {
					font-weight: 700;
					font-size: 40rpx;
				}

				.content {
					.item {
						display: flex;
						justify-content: space-between;
						.info{
							padding: 20rpx 0;
							&:nth-child(1){
								margin-right: 120rpx;
							}
						}

					}
				}

				.desc{
					background: #fdfaf1;
					padding: 20rpx;
					font-size: 28rpx;
				}
			}
		}
  }

  .btn {
    width: 90%;
    background: var(--themeColorBlue);
    color: #fff;
    position: fixed;
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 111;
  }
}
